// eslint-disable-next-line import/no-unresolved
import React, {Component} from 'react';
import echarts from 'echarts'
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import Debounce from "lodash.debounce";
import {addResizeHook, removeHook} from "@/utils/resize";
import {connect} from "react-redux";


class TieShuiFan extends Component {


  state = {
    data: [],
    chart: null,
    hook: this,
    option: {
      title: {
        text: '含矾量'
      },
      tooltip: {
        show: true,
        trigger: 'item'
      },
      backgroundColor: '#fff',
      grid: {
        left: '18%',
        top: '15%',
        bottom: '10%'
      },
      series: [{
        type: 'bar',
        barWidth: 11, // 固定柱子宽度
      }],
      xAxis:{
        show:false
      },
      yAxis:{
        show:false
      }
    }
  };

// 设置图表自适应钩子,100ms的过渡延迟
  resize = Debounce(() => {
    this.state.chart.resize()
  }, 100);


  initChart = (current, value,chart,option) => {

    const newArray = [];

    let max = 0;

    if (value) {
      for (let i = 0; i < value[0].length; i++) {
        newArray.push([value[0][i], value[1][i]]);
        if (value[1][i] > max) {
          max = value[1][i]
        }
      }
    }

    option.xAxis = {
      type: 'value',
      splitLine: {
        show: false
      }
    };
    option.yAxis = {
        type: 'value',
        min: 0,
        max: 100,
        splitLine: {
          show: false
        },
        axisLabel: {
          formatter: '{value}%'
        }
      };
    option.series[0].data = newArray;
    option.series[0].name = "";
    option.series[0].markLine = {
      symbol: "none",
      lineStyle: {               // 警戒线的样式  ，虚实  颜色
        type: "solid",
        color: "#000",
      },
      label: {
        position: 'end',
        formatter: `${current}`
      },
      data: [
        // 配置线端起始点
        [
          {
            coord: [current, 0]
          },
          {
            coord: [current, max]
          }
        ]
      ]
    };
      chart.setOption(option, true);
  };


  componentDidMount() {
    const dom = document.getElementById(`s-tieshui`);
    const chart = echarts.init(dom);
    // const {chartId} = this.props;
    // 基于准备好的dom，初始化echarts实例
    // this.state.chart = echarts.init(document.getElementById(chartId));
    // 绘制图表

    this.state.chart = chart;
    chart.setOption(this.state.option);

    chart.showLoading({
      text: '数据正在加载...',
      textStyle: {fontSize: 30, color: '#444'},
      effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
    });
    addResizeHook(this, chart.resize)

  }


  componentWillUnmount() {
    removeHook(this)
  }

  // 监听父组件更改的数据
  static getDerivedStateFromProps(nextProps, prevState) {
    const {contentStatistics} = nextProps;
    // 当传入的type发生变化的时候，更新state
    if (contentStatistics && contentStatistics !== prevState.contentStatistics) {
      const hf = contentStatistics.hf;
      const dist = contentStatistics.CURRENT_HF;
      const {chart,option} = prevState;
      if (chart) {
        prevState.hook.initChart(hf, dist, chart,option);
        chart.hideLoading()
      }
    }
    // 否则，对于state不进行任何操作
    return null;
  }


  render() {
    const {
      chartId,
      width = 100,
      height = 300
    } = this.props;

    return (
      <div id='s-tieshui' style={{width: `${width}%`, height}}/>
    )
  }
}

export default connect(({hanfan, loading, global}) => ({
  contentStatistics: hanfan.contentStatistics,
  quntileEffect: loading.effects['hanfan/contentStatistics']
}))
(TieShuiFan);
